<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hello, World</title>
<style type="text/css">
html {
	height: 100%
}

body {
	height: 100%;
	margin: 0px;
	padding: 0px
}

#container {
	height: 100%
}
</style>
<script type="text/javascript"
	src="http://api.map.baidu.com/getscript?v=2.0&ak=BQuiinChlMs7g4B2H3B9tgYEXpo4OH0W">
	//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
</script>
<script type="text/javascript"
	src="./js/jquery-1.11.0.min.js">
</script>
</head>

<body>
	<div id="container"></div>
	<script type="text/javascript">
		var map = new BMap.Map("container");//创建百度地图实例，绑定地图容器的id
		var point = new BMap.Point(-73.985685, 40.748424);
		map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别  //创建坐标点实例，设定该坐标经纬度(经度，维度)
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

		var navControl = new BMap.NavigationControl({//平移缩放控件
			anchor : BMAP_ANCHOR_BOTTOM_RIGHT,//显示在右下角
			offset : new BMap.Size(10, 10),//偏移量
		//type:BMAP_NAVIGATION_CONTROL_LARGE//显示完整的平移缩放空间
		});
		map.addControl(navControl);
        
		var isBig = true;
		var markerArray = [];
		
		map.addEventListener("zoomend", function() {
			if (this.getZoom() > 14 && isBig==false ) {
				//alert("小到大");
				isBig=true;//修改当前标记为大
				switchIcon(true);
			}
			if (this.getZoom() < 15 && isBig==true) {
				//alert("大到小");
				isBig=false;//修改当前标记为小
				switchIcon(false);
				
			}
		});
		
		function switchIcon(isBig){
			if(isBig==true){
				//alert("执行从小到大");
				for(var index in markerArray){
					marker = markerArray[index];
					oldUrl = marker.getIcon().imageUrl;
					newUrl = oldUrl.replace(/p/,"r");
					var opts = {
							anchor : new BMap.Size(15, 30),
							imageSize : new BMap.Size(30, 30)
					}
					var myIcon = new BMap.Icon(newUrl, new BMap.Size(30, 30), opts); //icon类的带参构造，创建一个实例
					marker.setIcon(myIcon);
				}
			}
			if(isBig==false){
				//alert("执行从大到小");
				for(var index in markerArray){
					marker = markerArray[index];
					oldUrl = marker.getIcon().imageUrl;
					newUrl = oldUrl.replace(/r/,"p");
					var opts = {
							anchor : new BMap.Size(5, 10),
							imageSize : new BMap.Size(10, 10)
					}
					var myIcon = new BMap.Icon(newUrl, new BMap.Size(10, 10), opts); //icon类的带参构造，创建一个实例
					marker.setIcon(myIcon);
				}
			}
		}
		
		//声明站点信息的URL
		//var info_url="https://gbfs.citibikenyc.com/gbfs/en/station_information.json";
		var info_url="http://106.75.28.204/dataserver/rtdata/info";//老师的服务器内的数据，避免网络问题
		//发送请求获取数据
		$.get(info_url, function(infoData){
			
			//从infoData中获取station数组
			var infoStations = infoData.data.stations;
			for(var index in infoStations){//遍历station数组
				  
			    var station = infoStations[index];
			    //获取lon lat属性值 创建BMap.Point实例
				var point = new BMap.Point(station.lon, station.lat);
				//调用addMarker方法，生成站点标注
				addMarker(point);
			}
			
		});

		
		
		function addMarker(point) { // 创建图标对象  
			var opts = { //icon配置参数
				/*图标的定位锚点。此点用来决定图标与地理位置的关系，
				  是相对于图标左上角的偏移值，默认等于图标宽度和高度的中间值*/
				anchor : new BMap.Size(15, 30),
				//设置图片大小
				imageSize : new BMap.Size(30, 30)
			}
			var myIcon = new BMap.Icon("img/ri_0.png", new BMap.Size(30, 30), opts); //icon类的带参构造，创建一个实例
			// 创建标注对象并添加到地图   
			var marker = new BMap.Marker(point, {
				icon : myIcon
			});
			markerArray.push(marker);
			map.addOverlay(marker);
		}

	</script>
</body>
</html>